<template>
    <div class="container pb-5"  style="width:70%">
        <div class="d-flex justify-content-center" style="background-color: #f4f4f5;">
            <el-form :inline="true" :model="form" class="pt-3">
                <el-form-item label="客户名称">
                    <el-input v-model="form.name" placeholder="请输入客户名称" clearable />
                </el-form-item>
                <el-form-item label="客户类型">
                    <el-input v-model="form.type" placeholder="请输入客户类型" clearable />
                </el-form-item>
                <el-form-item label="客户行业">
                    <el-input v-model="form.industry" placeholder="请输入客户行业" clearable />
                </el-form-item>
            </el-form>
        </div>
        <div class="d-flex justify-content-end mt-2 pt-3">
            <el-button type="primary">查询</el-button>
            <el-button type="success" @click="detail">
                <span class="pe-2">
                    <el-icon :size="18"> <component :is="'UserFilled'"></component></el-icon>
                </span>
                客户画像及资产推荐
            </el-button>
        </div>
        <div class="pt-5">
            <el-table :data="tableData" border highlight-current-row stripe style="width: 100%">
                <el-table-column prop="no" label="客户编号"/>
                <el-table-column prop="name" label="客户名称"/>
                <el-table-column prop="type" label="客户类型" />
                <el-table-column prop="industry" label="客户行业" />
                <el-table-column prop="status" label="客户状态" />
                <el-table-column prop="memberStatus" label="会员状态" />
                <el-table-column prop="source" label="客户来源" />
                <el-table-column prop="contactName" label="联系人名称" />
                <el-table-column prop="contactPhone" label="联系人手机" />
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref ,reactive, computed } from 'vue'
    import { useRouter } from "vue-router"

    const router = useRouter()

    const form = reactive({
        name: '',
        type: '',
        industry: '',
    })
    const tableData = reactive([
        {
            no:"8000288666",
            name:"美好未来资产管理有限公司",
            type:"地方民营AMC",
            industry: "资产管理",
            status:"活跃",
            memberStatus: "正常",
            source: "AMC",
            contactName: "李锋刚",
            contactPhone:"18722359709"
        },
        {
            no:"8000288999",
            name:"广州资产",
            type:"地方AMC",
            industry: "房地产",
            status:"活跃",
            memberStatus: "正常",
            source: "AMC",
            contactName: "张伟",
            contactPhone:"18722359709"
        },
        {
            no:"8000288900",
            name:"四川亚科智能科技股份有限公司",
            type:"地方企业",
            industry: "电子通讯",
            status:"活跃",
            memberStatus: "正常",
            source: "AMC",
            contactName: "张伟",
            contactPhone:"18722359709"
        },
        {
            no:"8000288922",
            name:"广州市黄埔房地产开发总公司",
            type:"地方企业",
            industry: "房地产",
            status:"活跃",
            memberStatus: "正常",
            source: "AMC",
            contactName: "张伟",
            contactPhone:"18722359709"
        },
        {
            no:"8000288933",
            name:"佛山市顺德区商都贸易有限公司",
            type:"地方企业",
            industry: "服装",
            status:"不活跃",
            memberStatus: "失效",
            source: "AMC",
            contactName: "张伟",
            contactPhone:"18722359709"
        },
    ])
    const detail = () => {
        router.push('/bi_frontend/portrait/customer/detail')
    }
</script>
    
<style scoped></style>